<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改手机,获取手机验证码</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css"/>
      <style>
      html,body{
          /*background: #fff;*/
      }
      .inner_header{
          font-size: 1.6rem;
          color: #000000;
          font-weight: 600;
          height: 6.9rem;
          margin: 0;
          padding: 2.4rem 0 0 0;
          box-sizing: border-box;
          background: none!important;
          box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
          background: #fff!important;
      }
      .inner_header .right{
        font-size: 1.4rem;
        color: #6f6f6f;
      }
      .content{
        width: 100%;
        float: left;
        margin: 6.9rem 0 0 0;
      }
      .content_list{
          background: #fff;
          width: 100%;
          float: left;
          box-sizing: border-box;
          padding: 0 1.3rem 0 1.3rem;
          margin-top: 1.05rem;
      }
      .content .ash{
        background-color: #f2f2f2;
        width: 100%;
        font-size: 1.3rem;
        color: #999;
        margin-top: 1.25rem;
        letter-spacing: 0.03rem;
        height:1.3rem;
        line-height: 1.3rem;
      }
      .content_list .content_li{
          float: left;
          width: 100%;
          height: 4.55rem;
          box-sizing: border-box;
          color: #999999;
          font-size: 1.5rem;
          line-height: 4.55rem;
          display: flex;
          text-align: center;
          box-sizing: border-box;
          align-items: center;
      }
      .content_list .content_li .text{
         height: 1.5rem;
         color: #999;
         letter-spacing: 0.03rem;
         font-size: 1.5rem;
      }
      input::-webkit-input-placeholder {
       /* placeholder颜色  */
       color: #c1c1c1;
       /* placeholder字体大小 */
       font-size: 1.5rem;
       /* placeholder字间距  */
       letter-spacing: 0rem;
     }
     .content_list .content_li .second{
        width: 4.5rem;
        height: 2.15rem;
        line-height: 2.15rem;
        text-align: center;
        border-radius: 0.5rem;
	      border: solid 0.1rem #b2b2b2;
        font-size: 1.2rem;
        color: #999;
     }
      </style>
  </head>
  <body>
      <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
          <a class="aui-pull-left aui-btn" onclick="goBack()">
              <img src="../../../../image/back.png">
          </a>
          <div class="aui-title">修改手机</div>
          <a class="aui-pull-right share_nav_right right" onclick="go_url('setting','../setting.html')">
               确认
          </a>
        </header>
        <div class="content">
          <div class="content_list ash">
    短信验证码已发送至+86 152 2609 2860，请填写验证码
          </div>
          <div class="content_list">
              <div class="content_li">
                  <input type="text" placeholder="请输入验证码" class="text"  @input="clickInput" ref="refcode" maxlength="11" v-if="create">
                  <div class="second" @click="count">{{number}}s</div>
              </div>
          </div>
        </div>
      </div>
  </body>
  <script type="text/javascript" src="../../../../script/api.js"></script>
  <script type="text/javascript" src="../../../../script/zepto.js"></script>
  <script type="text/javascript" src="../../../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../../../script/swiper.min.js"></script>
  <script type="text/javascript" src="../../../../script/utils.js"></script>
  <script type="text/javascript" src="../../../../script/common.js"></script>
  <script type="text/javascript" src="../../../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          number:60,
          create:false,
        },
        methods:{
          clickInput:function(){

          },
          count:function(){
            this.create=true;
            var clock = window.setInterval(() => {
                if(this.create==false){
                  window.clearInterval(clock);
                  this.number='106'
                } else {
                  this.number--
                  // console.log(this.number)
                  if (this.number < 0) {     //当倒计时小于0时清除定时器
                    window.clearInterval(clock)
                    this.number = '106'
                  }
                }
            },1000)
          }
        },
        mounted:function(){
          this.count()
        },

      })

      function go_url(name, url) {
          api.closeToWin({
              name: name,
              url: url,
              pageParam: {
                  data: ""
              }
          });
      }
  </script>
  </html>
